<template>
    <div class="box_card">
        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <span>挂号详情</span>
                </div>
            </template>
            <!-- body -->
            <div class="con">
                <!-- 挂号与二维码 -->
                <div class="left">
                    <!-- 挂号tag -->
                    <el-tag type="success">
                        <div class="tag">
                            <svg t="1709884689867" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4486" width="16" height="16">
                                <path
                                    d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z"
                                    fill="#1afa29" p-id="4487"></path>
                            </svg>
                            <span style="margin-left: 5px;">
                                {{ seeDoc?.param.orderStatusString }}
                            </span>

                        </div>
                    </el-tag>
                </div>
                <div class="right">
                    <!-- 挂号二维码 -->
                    <div class="rightCon">
                        <div class="imga">
                            <img src="../../../../assests//images/code_app.png" alt="app下载">
                        </div>
                        <div class="pCon">
                            <p class="wxp">微信 关注“北京114预约挂号”</p>
                            <p>“快速预约挂号”</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 详情内容 -->
            <div class="detailCon">
                <div class="detLeft">
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊人信息
                                </div>
                            </template>
                            {{ seeDoc?.patientName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊日期
                                </div>
                            </template>
                            {{ seeDoc?.reserveDate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊医院
                                </div>
                            </template>
                            {{ seeDoc?.hosname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊科室
                                </div>
                            </template>
                            {{ seeDoc?.depname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医生职务
                                </div>
                            </template>
                            {{ seeDoc?.title }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医生服务费
                                </div>
                            </template>
                            <span style="color: red">{{ seeDoc?.amount }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号单号
                                </div>
                            </template>
                            {{ seeDoc?.outTradeNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号时间
                                </div>
                            </template>
                            {{ seeDoc?.createTime }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="but" v-if="seeDoc?.orderStatus != -1">
                        <el-popconfirm title="确定要取消预约吗?" confirm-button-text="确定" cancel-button-text="取消"
                            @confirm="confirm">
                            <template #reference>
                                <el-button>取消预约</el-button>
                            </template>
                        </el-popconfirm>

                        <el-button type="primary" @click="openDia" v-if="seeDoc?.orderStatus !=1">支付</el-button>
                    </div>
                </div>
                <div class="detRight">
                    <el-card style="max-width: 100%">
                        <template #header>
                            <div class="matters">
                                <span>注意事项</span>
                            </div>
                        </template>
                        <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                        <p style="color: red">
                            2.【取号】就诊当天需在{{ seeDoc?.fetchTime }}前
                            在医院取号，未取号视为爽约，该号不退不换；
                        </p>
                        <p>
                            3.【退号】在{{ seeDoc?.quitTime }}前可在线退号 ，逾期将不可办理退号退费；
                        </p>
                        <p>
                            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                        </p>
                        <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                    </el-card>
                </div>
            </div>
        </el-card>
    </div>
    <div class="dia">
        <el-dialog v-model="dialogFormVisible" title="微信支付" width="400" @close="close">
            <div class="needBor">
                <img :src="twoDimUrl" alt="">
                <p>请使用微信扫一扫</p>
                <p>扫描二维码支付</p>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="closeDia">关闭窗口</el-button>
                </div>
            </template>


        </el-dialog>
    </div>

</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref } from 'vue';
import { getOrder, getCanalOrder, getEr,getOrderStatus } from '@/api/client/index'
import type { orderDataType, orderType, twoDimType, twoDim,orderStatus } from '@/api/client/type'
import { ElMessage } from 'element-plus';
// 引入qrcode插件 生成二维码
// @ts-ignore
import QRCode from 'qrcode';

onMounted(async () => {
    await getDetail()
})

let $route = useRoute()
let $router = useRouter()
// 进入页面后获取query
let enterId = $route.query.id
// 存储就诊信息
let seeDoc = ref<orderDataType>()
// 预约&支付状态
let state = ref<string>('')
// dia 显示隐藏
let dialogFormVisible = ref<boolean>(false)
// 获取二维码字符串信息
let getTwoDimData = ref<twoDim>()
// 存储二维码路径
let twoDimUrl = ref<string>('')
// 存储定时器
let timer = ref<any>('')


const getDetail = async () => {
    //@ts-ignore
    let result: orderType = await getOrder(enterId)
    if (result.code == 200) {
        seeDoc.value = result.data
        state.value = result.data.param.orderStatusString

    } else {
        ElMessage({
            type: "error",
            message: result.message
        })
    }

}
// 取消订单预约
const confirm = async () => {
    let result = await getCanalOrder(enterId as any)
    getDetail()

}
// 打开dia
const openDia = async () => {
    let result: twoDimType = await getEr(enterId as any)
    getTwoDimData.value = result.data
    // 生成二维码
    twoDimUrl.value =await QRCode.toDataURL(getTwoDimData.value.codeUrl)

    dialogFormVisible.value = true
    // 开启定时器查询订单状态
    timer.value = setInterval(async() => { 
        let result = await getOrderStatus(enterId as any)
        if (result.data == true) { 
            getDetail()
            // 清除定时器
            clearInterval(timer.value)
            // 关闭dia
            dialogFormVisible.value = false
        }
    },1000)
}
// 关闭支付
const closeDia = () => {
    // 清除定时器
    clearInterval(timer.value)
    // 关闭dia
    dialogFormVisible.value = false
}
// 关闭窗口
const close = () => { 
    // 清除定时器
    clearInterval(timer.value)
    // 关闭dia
    dialogFormVisible.value = false
}



</script>

<style scoped lang="scss">
.card-header {
    span {
        color: #7f7f7f;
        font-weight: 900;
    }
}

.con {
    display: flex;

    .left {
        flex: 7;

        .tag {
            display: flex;
            align-items: center
        }
    }

    .right {
        flex: 3;

        .rightCon {
            display: flex;

            .imga {
                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        .pCon {
            .wxp {
                margin-left: 10px;
            }
        }
    }
}

.detailCon {
    display: flex;
    border-top: 1px solid #7f7f7f;
    padding-top: 10px;
    margin-top: 10px;

    .detLeft {
        flex: 3;
        margin-right: 20px;

        .but {
            margin-top: 10px;
        }
    }

    .detRight {
        flex: 7;

        p {
            margin-top: 5px;
            line-height: 30px;
        }
    }
}

.dia {
    :deep(.el-dialog__body) {
        border-bottom: 1px solid #7f7f7f;
        border-top: 1px solid #7f7f7f;
    }

    .needBor {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin-top: 10px;
        }

    }
}
</style>